<template>
  <PcHeader
    :titleNameImg="titleImg"
    :titleBgImg="titleBgImg"
    :isEmbed="getParam('win') !== '1'"
    :popupUrl="popupUrl"
    :buttonOrder="['Disclaimer']"
    minWidth="1166px"
  >
    <template slot="buttons-left">
      <Guide
        :visible="showGuideIndex === 1"
        content="如果您在使用功能中有疑惑和难点，可点击此处查看详细介绍视频"
        buttonContent="下一步"
        @hiddenGuide="showGuideIndex = 2"
      >
        <div slot="reference" class="introduce" @click.stop="jumpVideo">
          <span>功能介绍</span>
        </div>
      </Guide>
      <Guide
        :visible="showGuideIndex === 2"
        content="如果您在使用功能中有任何建议或意见，我们非常欢迎您的反馈，您的每一条建议都是我们不断进步和完善的动力"
        buttonContent="我知道了"
        @hiddenGuide="hiddenGuide"
      >
        <div slot="reference" class="introduce" @click.stop="jumpFeedBack">
          <span>意见反馈</span>
        </div>
      </Guide>
    </template>
    <template slot="buttons-right">
      <Guide
        :visible="showAimeTip"
        content="点击这里再次唤出您的专属Aime"
        buttonContent="我知道了"
        left="10px"
        @hiddenGuide="hiddenAimeTip"
      >
        <div slot="reference" class="aienter introduce" @click.stop="showAime"></div>
      </Guide>
    </template>
  </PcHeader>
</template>

<script setup lang="ts">
import config from '@/config/index.ts';
import { openClient, openFeedBack, getParam } from '_t';
interface Props {
  showAimeTip: boolean;
}

withDefaults(defineProps<Props>(), {});

interface Emits {
  (e: 'showAime'): void;
  (e: 'hiddenAimeTip'): void;
}
const emits = defineEmits<Emits>();

const {
  urls: { video, feedback },
  feedbackId,
  storageKey: { firstEntry },
  imgs: { titleImg, titleBgImg }
} = config;

const instance = getCurrentInstance() as any;
// 获取当前缓存实例
const localforageIns = instance.proxy.$localforageIns;

// 弹窗地址
const popupUrl = ref('');
const getPopupUrl = () => {
  let url = location.href;
  const prefix = url.includes('?') ? '&' : '?';
  url += `${prefix}win=1`;
  return url;
};
// 跳转介绍视频
const jumpVideo = () => {
  openClient({ link: video, mode: 5 });
};
// 跳转反馈
const jumpFeedBack = () => {
  openFeedBack(feedback, feedbackId);
};
const showGuideIndex = ref(0);
const hiddenGuide = () => {
  showGuideIndex.value = 0;
  localforageIns.setItem(firstEntry, true);
};

const hiddenAimeTip = () => {
  emits('hiddenAimeTip');
};

const showAime = () => {
  emits('showAime');
};

onMounted(() => {
  localforageIns.getItem(firstEntry).then((res: boolean) => {
    if (!res) {
      showGuideIndex.value = 1;
    }
  });
  popupUrl.value = getPopupUrl();
});
</script>

<style scoped lang="less">
.introduce {
  position: relative;
  height: 22px;
  margin: 0 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  &::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 8px;
    background: rgba(255, 255, 255, 0.25);
    right: -13px;
    top: 8px;
  }
  span {
    font-family: MicrosoftYaHei;
    font-size: 14px;
    color: #8c8c8c;
    letter-spacing: 0;
    text-align: right;
    line-height: 16px;
    font-weight: 400;
    &:hover {
      color: #40a9ff;
    }
  }
}
.aienter {
  width: 72px;
  background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/fa5d0f4a-24d4-4def-98bf-a5c873aff8d1.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
</style>
